<template>
  <header>
     <div class="wenzi">
        <p>爆爆团</p>
        <p>限时爆款 超级低价</p>
     </div>
     <div class="xuanxiang">
       <span>正在抢购</span>
       <span @click="shangxin()">上新预告</span>
     </div>
     
  </header>
</template>

<script>
export default {
       data(){

       },
       methods:{
         shangxin(){
           alert('暂时没有新商品哦！')
         }
       }
}
</script>

<style>
 header{
    width: 100%;
    height: 120px;
    background-color: rgba(228, 24, 58, 0.468);
    text-align: center;
 }
 header .wenzi{
    width: 100%;
    height: 90px;
    text-align: center;
    box-sizing: border-box;
 }
 header .wenzi p:nth-child(1){
    font-size: 16px;
    font-weight: 700;
    color: antiquewhite;
    font-style: italic;
 }
  header .wenzi p:nth-child(2){
    font-size: 24px;
    font-weight: 700;
    color: antiquewhite;
    margin-top: 20px;
 }
 .xuanxiang{
    height: 25px;
    width: 100%;
    margin-bottom: 20px;
    text-align: left;
 }
.xuanxiang span{
    color:  antiquewhite;
    font-size: 12px;
    margin:  0 15px;
}
</style>